<template>
    <transition>
        <el-dialog :title="dialogType === 'add' ? '添加课程信息' : '修改课程信息'" v-model="showFlag" width="600px" append-to-body
            @close="handleClose" @open="handleOpen">
            <el-form hide-required-asterisk ref="formRef" :rules="formRule" :model="formInfo" label-width="auto"
                style="padding:30px 30px 0 30px">
                <el-form-item label="课程名称" prop="name">
                    <el-input placeholder="课程名称" type="text" v-model="formInfo.name"></el-input>
                </el-form-item>
                <el-form-item label="学分" prop="credits">
                    <el-input placeholder="学分" type="number" v-model="formInfo.credits"></el-input>
                </el-form-item>
                <el-form-item label="课程类别" prop="category">
                    <el-select placeholder="课程类别" v-model="formInfo.category">
                        <el-option v-for="e in category" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开课学期" prop="semester">
                    <el-select v-model="formInfo.semester" placeholder="开课学期" clearable style="width: 240px">
                        <el-option v-for="e in semesters" :key="e" :label="e.name" :value="e.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考核方式" prop="assessmentMethod">
                    <el-select placeholder="考核方式" v-model="formInfo.assessmentMethod">
                        <el-option v-for="e in assessmentMethod" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课开始周次" prop="startWeek">
                    <el-input placeholder="上课开始周次" type="number" v-model="formInfo.startWeek"></el-input>
                </el-form-item>
                <el-form-item label="上课结束周次" prop="endWeek">
                    <el-input placeholder="上课结束周次" type="number" v-model="formInfo.endWeek"></el-input>
                </el-form-item>
                <el-form-item label="总学时" prop="totalHours">
                    <el-input placeholder="总学时" type="number" v-model="formInfo.totalHours"></el-input>
                </el-form-item>
                <el-form-item label="选课方式" prop="selectionMethod">
                    <el-select placeholder="选课方式" v-model="formInfo.selectionMethod">
                        <el-option v-for="e in selectionMethod" :key="e" :value="e.value" :label="e.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 40px; margin-left: 372px; ">
                    <el-button @click="handleClose" size="mini">取消</el-button>
                    <el-button @click="formSubmit" size="mini" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </transition>
</template>

<script setup>
import api from '@/api/api';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const props = defineProps({
    dialogType: {
        type: String,
        default: 'add'
    }, showDialog: {
        type: Boolean
    },
    applyId: {
        default: ''
    },
    editForm: {
        type: Object
    }
})
const emit = defineEmits(['dialogClosed'])
const showFlag = ref(false)

let semesters = [
    // id, name
]
const category = [
    { value: '0', label: '通识必修' },
    { value: '1', label: '通识选修' },
    { value: '2', label: '专业基础' },
    { value: '3', label: '专业核心' },
    { value: '4', label: '专业选修' },
    { value: '5', label: '实践教学' },
    { value: '6', label: '其他' },
]
const assessmentMethod = [
    { value: '0', label: '考试' },
    { value: '1', label: '考查' },
    { value: '2', label: '其他' },
]
const selectionMethod = [
    { value: '0', label: '必修' },
    { value: '1', label: '可选' },
    { value: '2', label: '通选' },
    { value: '3', label: '其他' },
]

const formRef = ref(null)

const validateCredits = (rule, value, callback) => {
    let num = parseInt(value)
    if (0 > num || num > 99) {
        callback(new Error('请输入0-99数字'))
    }
    callback()
}
const validateWeek = (rule, value, callback) => {
    let num = parseInt(value)
    if (0 > num || num > 100) {
        callback(new Error('请输入0-100数字'))
    }
    callback()
}
const validateTotalHours = (rule, value, callback) => {
    let num = parseInt(value)
    if (0 > num || num > 1000) {
        callback(new Error('请输入0-1000数字'))
    }
    callback()
}
const formRule = ref({
    name: [
        { required: true, message: '请填写课程名称', trigger: 'blur' }
    ],
    credits: [
        { required: true, message: '请填写学分', trigger: 'blur' },
        { validator: validateCredits, trigger: 'blur' },
    ],
    category: [
        { required: true, message: '请填写课程类别', trigger: 'blur' }
    ],
    semester: [
        { required: true, message: '请填写开课学期', trigger: 'blur' }
    ],
    assessmentMethod: [
        { required: true, message: '请填写考核方式', trigger: 'blur' }
    ],
    startWeek: [
        { required: true, message: '请填写上课开始周次', trigger: 'blur' },
        { validator: validateWeek, trigger: 'blur' },
    ],
    endWeek: [
        { required: true, message: '请填写上课结束周次', trigger: 'blur' },
        { validator: validateWeek, trigger: 'blur' },
    ],
    totalHours: [
        { required: true, message: '请填写总学时', trigger: 'blur' },
        { validator: validateTotalHours, trigger: 'blur' },
    ],
    selectionMethod: [
        { required: true, message: '请填写选课方式', trigger: 'blur' }
    ],
})
const formInfo = reactive(
    {
        'name': '', 'credits': '', 'category': '', 'semester': '', 'assessmentMethod': '',
        'startWeek': '', 'endWeek': '', 'totalHours': '', 'selectionMethod': '',
    },
)
const formSubmit = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            if (props.dialogType == 'add') {
                api.course.add(
                    formInfo.name, formInfo.credits, formInfo.category,
                    formInfo.semester, formInfo.assessmentMethod,
                    formInfo.startWeek, formInfo.endWeek,
                    formInfo.totalHours, formInfo.selectionMethod
                ).then((res) => {
                    ElMessage({
                        message: '添加成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            } else {
                api.course.edit(
                    props.applyId, formInfo.name, formInfo.credits, formInfo.category,
                    formInfo.semester, formInfo.assessmentMethod,
                    formInfo.startWeek, formInfo.endWeek,
                    formInfo.totalHours, formInfo.selectionMethod
                ).then((res) => {
                    ElMessage({
                        message: '修改成功',
                        type: 'success'
                    })
                }).catch((err) => {
                    console.log(err)
                })

                handleClose()
            }

        }
    })
}
const handleClose = () => {
    showFlag.value = false
    formRef.value.resetFields()
    emit('dialogClosed')
}
const handleOpen = () => {
    if (props.dialogType === 'edit') {
        formInfo.name = props.editForm.name
        formInfo.credits = props.editForm.credits
        // formInfo.semester = props.editForm.semester
        formInfo.startWeek = props.editForm.startWeek
        formInfo.endWeek = props.editForm.endWeek
        formInfo.weeks = props.editForm.weeks
        formInfo.totalHours = props.editForm.totalHours
    }
}

watch(() => props.showDialog, (newValue, oldValue) => {
    showFlag.value = props.showDialog
})


onMounted(() => {
    api.semester.get_all().then((res) => {
        semesters = res.data.data
    })
})
</script>